<template>
  <el-dialog
    :visible.sync="show"
    center
    :append-to-body="true"
    :lock-scroll="false"
    width="3.1rem"
    class="right_dialog"
    :close-on-click-modal="true"
  >
    <div v-if="isbox1">
      <div class="dialog_help">
        <p class="contact">您的联系方式是</p>
        <div class="subscribe_ipt">
          <van-field v-model="sms" center clearable placeholder="请输入手机号码">
            <template #button>
              <van-button class="subscribe_btn" @click="OnCode" v-if="disshow">
                <span>获取验证码</span>
              </van-button>
              <van-button class="subscribe_btn" v-else>
                <span>{{ second }}s</span>
              </van-button>
            </template>
          </van-field>
          <van-field v-model="value1" placeholder="请输入验证码" />
        </div>
        <p
          class="next_btn"
          @click="
              isbox1 = false;
              isbox2 = true;
            "
        >下一步</p>
      </div>
    </div>
    <div v-if="isbox2">
      <div class="help_box">
        <div class="success">
          <img src="../../assets/image/yycg.png" alt />
          <p class="success_text">预约成功</p>
        </div>

        <p class="help_btn" @click="show = false">知道了</p>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      disshow: true,
      timer: null,
      second: 60,
      isbox1: true,
      isbox2: false,
      value1: "",
      sms: "",
      verifyCode: ""
    };
  },
  methods: {
    OnCode() {
      this.disshow = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.show = false;
          this.second--;
        } else {
          this.disshow = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.sms
        })
        .then(res => {
          // Notify(res.data.msg);
          if ((res.data.code = 0)) {
            this.verifyCode = res.data.data;
            this.$notify({
              message: res.data.msg,
              duration: 2000
            });
          } else {
            this.disshow = true;
            clearInterval(this.timer);
            this.timer = null;
            this.second = 60;
          }

          // this.$message({
          //   message: res.data.msg
          // });
        })
        .catch(function(error) {});
    }
  }
};
</script>
<style lang="less" scoped>
.dialog_help {
  .contact {
    text-align: center;
    font-size: 0.18rem;
    font-weight: bold;
    color: #222222;
    margin-bottom: 0.36rem;
  }
  .subscribe_ipt {
    .van-cell {
      width: 2.5rem;
      border: 1px solid #e0dfde;
      margin-bottom: 0.1rem;
      height: 0.38rem;
      .van-cell__value--alone {
        line-height: 0.25rem;
      }
    }
  }
  .subscribe_btn {
    border: none;
    border-left: 1px solid #e3e0df;
    color: #f5643e;
  }
  .next_btn {
    margin-top: 0.28rem;
    background: #f58057;
    border-radius: 10px;
    line-height: 0.45rem;
    text-align: center;
    font-size: 0.15rem;
    color: #ffffff;
  }
}
.help_box {
  .success {
    text-align: center;
    img {
      width: 0.66rem;
      height: 0.66rem;
    }
    .success_text {
      margin: 0.28rem 0;
      font-size: 0.16rem;
      color: #333333;
    }
  }

  .help_btn {
    width: 1.5rem;
    background: #f58057;
    border-radius: 48px;
    font-size: 0.15rem;
    color: #ffffff;
    line-height: 0.48rem;
    text-align: center;
    margin: 0 auto;
  }
}
</style>